<template>
  <div>
    <div class="login_box">
      <div class="login_left">
        <img src="../../assets/common/login_back.png" alt="">
      </div>
      <div class="login_right">
          <a-form class="myform" :model="formState"
          ref="myform"
          >
            <a-form-item label="手机号"
            :rules="[{required:true,message:'手机必填'}]">
              <a-input v-model:value="formState.mobile"></a-input>
            </a-form-item>
            <a-form-item label="密码"
            :rules="[
              {required:true,message:'密码必填'},
              {min:3,max:16,message:'密码3-16位'}
              ]">
              <a-input v-model:value="formState.password"></a-input>
            </a-form-item>
             <a-form-item >
               <a-checkbox v-model:value="formState.isAgree">记住我</a-checkbox>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="toLogin">登录</a-button>
            </a-form-item>
          </a-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
    import {reactive ,ref} from 'vue'
    import {tokenStore} from '../../store/index'
    import {message} from 'ant-design-vue'
    import {useRouter} from 'vue-router'
    // ui组件库会提供很多 type或接口类型 给开发者使用

  import {login} from '../../api/user'
  let store=tokenStore()
  let router=useRouter()
    let myform=ref();
    interface Iform{
        mobile:string,
        password:string,
        isAgree:boolean
    }

    let formState=reactive<Iform>({
         mobile:"13800000002",
         password:"hm#qd@23!",
         isAgree:false
    })
    let toLogin= ()=>{
      // 调用表单自带的验证方法
      myform.value.validate().then(async ()=>{
          console.log("表单验证通过")
           let res=await login(formState)
            console.log(res,"------8888888---")
           myform.value.resetFields();
          //  调用pinia的 actions的方法
           store.changeToken(res)

          //  跳转首页
          message.success("登录成功")
          // 
          router.push({
            path:"/layout/home"
          })
          
      })
       
    }

</script>
<style lang="less" scoped>
    .login_box{
      width: 100%;
      display: flex;
      height: 100vh;
      .login_left{
        flex:1;
          height: 100vh;
        img{
          width: 100%;
          height: 100vh;
        }
      }
      .login_right{
        width:600px;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .myform{
          width: 500px;
          height: 400px;
        }
      }
    }
</style>